<template>
  <div v-loading = "loading">
    <h1>发票管理</h1>
    <div style="height:30px">
        <el-input v-model="name" placeholder="输入发票名称" style="width:200px;float:left;margin-right:10px" size="mini"></el-input>
        <el-button size="mini" @click="getInvoiceByName"  style="float:left" icon="el-icon-search">查询</el-button>
        <el-button size="mini" @click="addInvoice"  style="float:left" type="primary"  icon="el-icon-plus">新增</el-button>
    </div>
    <div style="margin-top:10px">
        <el-table :data="tableData" style="width: 100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" border size="mini" v-loading="tableLoading" @selection-change="handleSelectionChange" >
            <el-table-column type="selection" align="center" width="40"></el-table-column>
            <el-table-column prop="invoice_number" label="发票号码" align="center" width="150" height="40"></el-table-column>
            <el-table-column prop="invoice_name" label="发票名称" align="center" width="150"></el-table-column>
            <el-table-column prop="invoice_purpose" label="发票用途" align="center" width="100"></el-table-column>
            <el-table-column prop="invoice_address" label="发票开具地址" align="center" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"></el-table-column>
            <!-- <el-table-column prop="invoice_telephone" label="发票电话" align="center" width="100"></el-table-column> -->
            <!-- <el-table-column prop="invoice_receive_name" label="收款方" align="center" width="50"></el-table-column>
            <el-table-column prop="invoice_pay_name" label="付款方" align="center" width="50"></el-table-column> -->
            <el-table-column prop="invoice_time" label="发票开具时间" align="center" width="150"></el-table-column>
            <el-table-column prop="invoice_money" label="发票金额" align="center" width="100"></el-table-column>
            <el-table-column prop="invoice_status" label="发票开具状态" :formatter="showName" align="center" width="100"></el-table-column>
            <el-table-column prop="invoice_id" v-if="false"></el-table-column>
            <el-table-column prop="aaa" label="发票图片" align="center" width="80">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="editPhoto(scope.row)" style="border:0px" v-if="scope.row.invoice_picture!=null">
                        查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="188">
                <template slot-scope="scope">
                    <el-button size="mini" @click="toEdit(scope.row)"  icon="el-icon-edit">
                    编辑
                    </el-button>
                    <el-button size="mini" type="danger" @click="deleteInvoice(scope.row)" icon="el-icon-delete">
                    删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div style="height:40px;margin-top:10px">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total.length" style="float:left">
        </el-pagination>
    </div>
    <div style="margin-top:10px">
      <el-button 
        size="mini" 
        @click="toDeleteInvoice" 
        type="danger" 
        style="float:left" 
        v-if="tableData.length>0" 
        :disabled="multipleSelection.length==0"
        icon="el-icon-delete"
        >
        批量删除
        </el-button>
    </div>
    <div>
        <el-dialog title="新增和编辑"
            :visible.sync="dialogVisible"
            width="30%" float="left">
            <div style="width:300px;">
                <el-form ref="form" :model="form" label-width="120px" :rules="rules">
                    <div>
                        <el-form-item label="发票号码"  size="mini"
                        prop="invoice_number" class="form-item"
                        >
                        <el-input type="number" v-model="form.invoice_number" style="width: 200px" placeholder="请输入" size="mini" ></el-input>
                        <input v-model="form.invoice_id"  type="hidden" />
                        </el-form-item>
                    </div>
                    
                    
                    <el-form-item label="发票名称"  size="mini"
                    prop="invoice_name" class="form-item"
                    >
                    <el-input v-model="form.invoice_name" style="width: 200px" placeholder="请输入" size="mini" ></el-input>
                    </el-form-item>
                    <el-form-item label="发票用途" size="mini"
                    prop="invoice_purpose" class="form-item"
                    >
                    <el-input v-model="form.invoice_purpose" style="width: 200px" placeholder="请输入" size="mini" ></el-input>
                    </el-form-item>
                    <el-form-item label="发票开具地址"  size="mini"
                    prop="invoice_address" class="form-item"
                    >
                    <el-input v-model="form.invoice_address" style="width: 200px" placeholder="请输入" size="mini" ></el-input>
                    </el-form-item>
                    <el-form-item label="发票电话"    size="mini"
                    prop="invoice_telephone" class="form-item"
                    >
                    <el-input type="number" v-model="form.invoice_telephone" style="width: 200px" placeholder="请输入" size="mini" ></el-input>
                    </el-form-item>
                    <el-form-item label="收款方名称" size="mini"
                    prop="invoice_receive_name" class="form-item"
                    >
                    <el-input v-model="form.invoice_receive_name" style="width: 200px" placeholder="请输入" size="mini" ></el-input>
                    </el-form-item>
                    <el-form-item label="付款方名称" size="mini"
                    prop="invoice_pay_name" class="form-item"
                    >
                    <el-input v-model="form.invoice_pay_name" style="width: 200px" placeholder="请输入" size="mini" ></el-input>
                    </el-form-item>
                    <el-form-item label="发票开具时间" size="mini"
                    prop="invoice_time" class="form-item"
                    >
                    <el-date-picker v-model="form.invoice_time" style="width: 200px" placeholder="请输入" size="mini" type="datetime" ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="发票金额" size="mini"
                    prop="invoice_money" class="form-item"
                    >
                    <el-input type="number" v-model="form.invoice_money" style="width: 200px" placeholder="请输入" size="mini" ></el-input>
                    </el-form-item>
                    <el-form-item label="发票开具状态" size="mini"
                    prop="invoice_status" class="form-item"
                    >
                        <el-select v-model="form.invoice_status" style="width: 200px" placeholder="请输入" size="mini" >
                            <el-option
                                v-for="item in allStatus"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="save" size="mini">保存</el-button>
                        <el-button @click="resetForm('form')" v-if="form.invoice_id==''" size="mini">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
    <div>
        <el-dialog title="图片上传与浏览"
            :visible.sync="dialogVisible1"
            width="40%" float="left">
            <uploadPictrue :src="src" :id="id" :uploadUrl="uploadUrl"  v-on:loadFather="loadTableData"></uploadPictrue>
        </el-dialog>
    </div>
  </div>
</template>
<script>
    import UploadPictrue from './UploadPictrue.vue'
    export default{
        data(){
            var checkPhonenumber=(rule, value, callback)=>{
                    if(!value){
                        callback(new Error('请输入发票电话'))
                    }else if(value.length!=11){
                        callback(new Error('这个电话号码是空号~'))
                    }else{
                        callback();
                    }
                }
            return{
                //总数据
                total:'',
                //上传地址
                uploadUrl:"/invoice/upload",
                //每页条数
                pagesize:10,
                //页数
                currentPage:1,
                //批量删除选中
                multipleSelection:[],
                //图片上传浏览弹窗判断
                dialogVisible1:false,
                //查询框数据
                name:'',
                //新增编辑弹窗
                dialogVisible:false,
                //编辑保存按钮
                editShow:false,
                //新增保存按钮
                saveShow:false,
                //是否显示加载动画
                tableLoading:false,
                //表格总数据
                tableData:[],
                //表单数据
                form:{
                    invoice_time:'',
                    invoice_number:'',
                    invoice_name:'',
                    invoice_purpose:'',
                    invoice_address:'',
                    invoice_telephone:'',
                    invoice_receive_name:'',
                    invoice_pay_name:'',
                    invoice_money:'',
                    invoice_status:'',
                    invoice_id:'',
                    },
                //图片地址
                src:'',
                //选中行数据
                rowData:'',
                //存发票id
                id:'',
                //
                chackFull:0,
                //状态数据(后期从码表取)
                allStatus:[
                    {id:'',name:''},
                    {id:1,name:'正常'},
                    {id:2,name:'补发'}
                ],
                loading:false,
                //表单验证规则
                rules:{
                    invoice_name:[
                        {required: true, message: '请输入发票名称', trigger: 'blur'},
                        {max:10,message:'最多10个字符'}
                    ],
                    invoice_time:[
                        {required:true,message:'发票开具时间',trigger:'blur' }
                    ],
                    invoice_number:[
                        {required:true,message:'请输入发票号码,需为数字',trigger:'blur'},
                        {min:8,max:8,message:'您输入的发票号码不正确'}
                    ],
                    invoice_purpose:[
                        {required: true, message: '请输入发票用途', trigger: 'blur'},
                        {max:10,message:"最多10个字符"}
                    ],
                    invoice_address:[
                        {required: true, message: '请输入发票开具地址', trigger: 'blur'},
                        {max:10,message:"最多10个字符"}
                    ],
                    invoice_telephone:[
                        {validator:checkPhonenumber,required: true, trigger: 'blur'}
                    ],
                    invoice_receive_name:[
                        {required: true, message: '请输入收款人名称', trigger: 'blur'},
                        {max:10,message:"最多10个字符"}
                        
                    ],
                    invoice_pay_name:[
                        {required: true, message: '请输入付款人名称', trigger: 'blur'},
                        {max:10,message:"最多10个字符"}
                    ],
                    invoice_money:[
                        {required: true, message: '请输入发票金额,需为数字', trigger: 'blur'},
                        {max:10,message:"最多10个字符"}
                    ],
                    invoice_status:[
                        {required: true, message: '请选择发票状态', trigger: 'change'}
                    ]
                }
            }
        },
        mounted:function(){
            this.tableLoading = true;
            this.loadTableData(true);
        },
        methods:{
            resetForm(data){
                this.$refs[data].resetFields();
            },
            //获取表格数据
            loadTableData(data){
                if(data){
                    this.loadTotal()
                }
                var _this=this;
                var data=[];
                this.loading = true;
                this.postRequest("/invoice/getInvoice",{
                    start:this.pagesize*(this.currentPage-1),
                    pageSize:this.pagesize
                }).then(resp=>{
                    this.loading = false;
                    _this.tableLoading=false;
                    if(resp&&resp.status==200){
                        _this.tableData = resp.data
                    }  
                })
            },
            loadTotal(){
                var _this=this;
                this.getRequest("/invoice/getAllInvoice").then(resp=>{
                    if(resp&&resp.status==200){
                        _this.total=resp.data
                    }
                })
            },
            //打开新增页面
            addInvoice(){
                // this.$refs['form'].resetFields();
                this.form.invoice_id ='';
                
                this.$nextTick(()=>{
                    if(this.$refs['form']){
                        this.$refs['form'].resetFields()
                    }
                    
                })
                this.dialogVisible=true;
            },
            //关闭新增页面
            close(){
                this.dialogVisible=false;
                this.dialogVisible1=false;
                this.saveShow=false;
                this.editShow=false;
                this.resetForm('form')
            },
            //新增和修改保存
            save(){
                var _this = this;
                var url;
                var param={};
                this.$refs['form'].validate((valid) => {
                    if(valid){
                        if(this.form.invoice_id==''){
                            url="/invoice/insertInvoice";
                            param={
                                invoice_time:_this.createdTimeFormart(_this.form.invoice_time),
                                invoice_number:_this.form.invoice_number,
                                invoice_name:_this.form.invoice_name,
                                invoice_purpose:_this.form.invoice_purpose,
                                invoice_address:_this.form.invoice_address,
                                invoice_telephone:_this.form.invoice_telephone,
                                invoice_receive_name:_this.form.invoice_receive_name,
                                invoice_pay_name:_this.form.invoice_pay_name,
                                invoice_money:_this.form.invoice_money,
                                invoice_status:_this.form.invoice_status
                            }

                        }else{
                            url="/invoice/updateInvoice";
                            param={
                                invoice_time:_this.createdTimeFormart(_this.form.invoice_time),
                                invoice_number:_this.form.invoice_number,
                                invoice_name:_this.form.invoice_name,
                                invoice_purpose:_this.form.invoice_purpose,
                                invoice_address:_this.form.invoice_address,
                                invoice_telephone:_this.form.invoice_telephone,
                                invoice_receive_name:_this.form.invoice_receive_name,
                                invoice_pay_name:_this.form.invoice_pay_name,
                                invoice_money:_this.form.invoice_money,
                                invoice_status:_this.form.invoice_status,
                                invoice_id:_this.form.invoice_id
                            }
                        }
                        this.loading = true;
                        _this.postRequest(url,param).then(resp=>{
                            this.loading = false;
                            if(_this.form.invoice_id==''){
                                _this.total.length+=1;
                                if(_this.total.length%_this.pagesize>0){
                                    _this.currentPage=parseInt(_this.total.length/_this.pagesize)+1
                                }else{
                                    _this.currentPage=_this.total.length/_this.pagesize
                                }
                            }
                            var data = resp.data;
                            _this.$message({type:data.status,message:data.msg});
                            _this.loadTableData();
                            _this.close();
                        })
                    }else{
                        _this.$message({type:'error',message:'带*号项为必填项,不能为空'});
                    }
                    
                });
            },
            //时间格式转换
            createdTimeFormart(time){
                let date = new Date(Date.parse(time));
                let y = date.getFullYear();
                let m = date.getMonth()+1;
                m=(m<10?'0'+m:m);
                let d = (date.getDate()<10?'0'+date.getDate():date.getDate());
                let h = (date.getHours()<10?'0'+date.getHours():date.getHours());
                let mi = (date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes());
                let s = (date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds());
                return y+'-'+m+'-'+d+' '+h+':'+mi+':'+s;
            },
            //条件查询
            getInvoiceByName(){
                this.tableLoading = true;
                var _this = this;
                this.loading = true;
                this.postRequest("/invoice/getInvoiceByName",{
                    name:this.name
                }).then(resp=>{
                    this.loading = false;
                    _this.tableLoading = false;
                    if(resp&&resp.status==200){
                        _this.tableData = resp.data
                    }
                    
                })
            },
            //打开编辑页面
            toEdit(data){
                    console.log(data)
                    this.dialogVisible=true;
                    this.form.invoice_time=data.invoice_time;
                    this.form.invoice_number=data.invoice_number;
                    this.form.invoice_name=data.invoice_name;
                    this.form.invoice_status=data.invoice_status;
                    this.form.invoice_money=data.invoice_money;
                    this.form.invoice_pay_name=data.invoice_pay_name;
                    this.form.invoice_receive_name=data.invoice_receive_name;
                    this.form.invoice_telephone=data.invoice_telephone;
                    this.form.invoice_address=data.invoice_address;
                    this.form.invoice_purpose=data.invoice_purpose;
                    this.form.invoice_id = data.invoice_id;
                    this.chackFull=1
            },
            //保存编辑
            // edit(){
            //     this.postRequest("/invoice/updateInvoice",{
            //          invoice_time:this.invoice_time,
            //         invoice_number:this.invoice_number,
            //         invoice_name:this.invoice_name,
            //         invoice_purpose:this.invoice_purpose,
            //         invoice_address:this.invoice_address,
            //         invoice_telephone:this.invoice_telephone,
            //         invoice_receive_name:this.invoice_receive_name,
            //         invoice_pay_name:this.invoice_pay_name,
            //         invoice_money:this.invoice_money,
            //         invoice_status:this.invoice_status,
            //         invoice_id:this.invoice_id
            //     }).then(resp=>{
            //         var data = resp.data;
            //         this.$message({type:data.status,message:data.msg});
            //         this.loadTableData();
            //         this.close();
            //     })
            // },

            //删除发票信息
            deleteInvoice(data){
                this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.postRequest("/invoice/deleteInvoice",{
                        invoice_id:data.invoice_id
                    }).then(resp=>{
                        this.loading = false;
                        var data1 = resp.data;
                        this.$message({type:data1.status,message:data1.msg});
                        this.loadTableData();
                        this.close();
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
            //查看图片
            editPhoto(data){
                this.src = data.invoice_picture
                this.rowData = data;
                this.id = data.invoice_id;
                this.dialogVisible1=true;
            },
            //多选时获取已购选项
            handleSelectionChange(data){
                this.multipleSelection = data;
            },
            //批量删除前置准备
            toDeleteInvoice(){
                var _this = this;
                this.$confirm('删除' + this.multipleSelection.length + '条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var multipleSelection = _this.multipleSelection;
                    var ids = '';
                    multipleSelection.forEach(row=> {
                        ids = ids + row.invoice_id + ',';
                    })
                    _this.deleteInvoices(ids);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除
            deleteInvoices(data){
                this.loading = true;
                this.postRequest("/invoice/deleteInvoices",{
                    ids :data
                }).then(resp=>{
                    this.loading = false;
                    var data1 = resp.data;
                    this.$message({type:data1.status,message:data1.msg});
                    this.loadTableData();
                })
            },
            //分页改变
            handleSizeChange(val){
                this.pagesize=val;
                this.tableLoading=true;
                this.loadTableData();
                
                
            },
            //分页改变
            handleCurrentChange(val){
                this.currentPage=val
                this.tableLoading=true;
                this.loadTableData()
            },
            showName(row,column){
                switch(row.invoice_status){
                    case '1':
                            return "正常";
                            break;
                    case '2':
                            return "补发";
                            break;
                    default:
                            return "未定义";
                }
            }
        },
        components: {
            'uploadPictrue':UploadPictrue
        }
    }
</script>
<style>
    .form-item{
        margin-bottom: 13px !important
    }
</style>
